<template>
	<Container>
		<view class="header">
			<view v-for="(item, index) in assignment.optionArticles" :key="index"><image :src="item.imageUrl" class="img" mode="aspectFit"></image></view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
		<view :class="{ error: chooses[0]==='error' }" hover-class="touch" hover-stay-time="300">
			<image class="box img" src="../../../static/yes.png" mode="widthFix" @tap="tap(true, 0)"></image>
		</view>
		<view :class="{ error: chooses[1]==='error' }" hover-class="touch" hover-stay-time="300">
			<image class="box img" src="../../../static/no.png" mode="widthFix" @tap="tap(false, 1)"></image>
		</view>
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container },
	methods: {
		tap: function(bool, index) {
			this.touchAudio()
			if (this.assignment.comparedArticle.isSamePinyin === bool) {
				this.$parent.next({
					isSure: true
				})
			} else {
				this.optionStatus('error',index)
				this.$parent.next()
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 45vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	position relative
	display flex
	justify-content center
	align-items center
	margin 5vh 0
	view
		width 50%
		height 100%
		display flex
		justify-content center
		align-items center
		transition all .3s
		image
			width 80%
			height 80%
.box
	width 400rpx
	margin 3vh 0
</style>
